import store from '@/store'
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入登录组件
const Reg = () => import('@/views/Reg/Reg.vue')
const Login = () => import('@/views/Login/Login.vue')
const Main = () => import('@/views/Main/Main.vue')
const Home = () => import('@/views/Menus/Home/Home.vue')
const UserInfo = () => import('@/views/Menus/User/UserInfo.vue')
const UserAvatar = () => import('@/views/Menus/User/UserAvatar.vue')
const UserPwd = () => import('@/views/Menus/User/UserPwd.vue')
const ArtCate = () => import('@/views/Menus/article/ArtCate.vue')
const ArtList = () => import('@/views/Menus/article/ArtList.vue')

Vue.use(VueRouter)

// 把下面的代码粘贴到路由模块中对应的位置，即可防止路由报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch((err) => err)
}

const routes = [
  { path: '/reg', component: Reg },
  { path: '/login', component: Login },
  {
    path: '/',
    component: Main,
    // 3.开启路由重定向
    redirect: '/home',
    children: [
      // 2.home 作为子路由规则
      { path: 'home', component: Home },
      // 用户信息组件的子路由规则
      { path: 'user-info', component: UserInfo },
      // 更换头像组件的子路由规则
      { path: 'user-avatar', component: UserAvatar },
      // 更换密码组件的子路由规则
      { path: 'user-pwd', component: UserPwd },
      // 文章分类组件的子路由规则
      { path: 'art-cate', component: ArtCate },
      // 文章列表组件的子路由规则
      { path: 'art-list', component: ArtList }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 使用导航守卫, 进行未登录的权限控制
// to: 到哪里去
// from: 从哪里来
// next: 是否放行, 函数, 调用不传参表示放行, 调用传入 false 表示不放行, 传入 path 可以强行跳转至指定路径
router.beforeEach((to, from, next) => {
  // 在特定的条件下强制跳转至 /login
  // 条件1: 未登录, 没有 token
  // 条件2: 要去的页面不是 /login 和 /reg (白名单)
  // 如果未登录时允许访问的页面很多, 需要在后面继续加 && 判断条件, 这样代码美观度较低, 语法也不够精简, 属于某内某鸟的代码
  // if (!store.state.user.token && to.path !== '/login' && to.path !== '/reg') {
  // 白名单: 不管登没登录都可以访问的页面
  // 高级的代码
  const whiteList = ['/login', '/reg']
  // includes: 包含, 判断指定的元素是否在数组中
  if (!store.state.token && !whiteList.includes(to.path)) {
    // 给用户一个友好的提示
    Vue.prototype.$message.error('您没登录啊傻子!')
    return next('/login')
  }
  next()
})

export default router
